<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="btnT">添加分类 </el-button>
				</el-col>
			</el-row>

			<!-- 表格 -->
			<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
			 show-index index-text="#" border :show-row-hover="false">
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
					<i class="el-icon-error" v-else style="color: red"></i>
				</template>

				<!-- 排序	 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
					<el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
					<el-tag size="mini" type="warning" v-else>三级</el-tag>
				</template>

				<!-- 操作 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit">编辑</el-button>
					<el-button type="success" icon="el-icon-delete">删除</el-button>
				</template>
			</tree-table>

			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
			 :page-sizes="[3, 5, 10, 15]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="20">
			</el-pagination>
		</el-card>
		<!-- 添加分类对话框 -->
		<el-dialog title="添加分类" :visible.sync="adddialogVisible" width="50%" @close="addCateDia">
			
			<!-- 添加分类 -->
			<el-form :model="addruleForm" :rules="addrulesrules" ref="addruleFormRef" label-width="100px">
				<el-form-item label="分类名称:" prop="cat_name">
					<el-input v-model="addruleForm.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类:">
					<!--   <el-input v-model="addruleForm.cat_name"></el-input> -->
					  <!-- options用来指定数据源 -->
						<el-cascader
						  expand-trigger= "hover"  
					    v-model="valueKeys"
					    :options="parenList"
					    :props="cascaderProps"	
					    @change="handleChange" clearable change-on-select></el-cascader>
				</el-form-item>
			</el-form>
      <!-- 添加表单的分类 -->
		<!-- 	<el-form :model="addruleForm" :rules="addrulesrules" ref="addCateFormRef" label-width="100px">
	
			</el-form> -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="adddialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 商品分类的数据列表，默认为空
				cateList: [],
				// 总数据条数量
				total: 0,
				// 查询条件
				queryInfo: {
					type: 3,
					pagenum: 1,
					pagesize: 5
				},
				// 添加对话框显示与隐藏
				adddialogVisible: false,
				// 表单数据
				addruleForm: {
					// 分类名称
					cat_name: '',
					// 分类ID
					cat_pid: 0,
					// 默认分类等级，默认是一级分类
					cat_level: 0,
				},
				// 分类验证规则
				addrulesrules: {
					cat_name: [{
						required: true,
						message: '请输入分类名称',
						trigger: 'blur'
					}]
				},
				// 父级分类列表
				parenList: [],
				// 选中的父级分类ID数组
				valueKeys: [],
				//指定级联选择器配置对象
				cascaderProps: {
					value: 'cat_id',
					label: 'cat_name',
					children: 'children'
				},

				columns: [{
						label: '分类名称',
						prop: 'cat_name'
					},
					{
						label: '是否有效',
						// 标书将当前列定义为模板列
						type: 'template',
						// 表示当前一列使用模板的名称
						template: 'isok'
					},
					{
						label: '排序',
						// 标书将当前列定义为模板列
						type: 'template',
						// 表示当前一列使用模板的名称
						template: 'order'
					},
					{
						label: '操作',
						// 标书将当前列定义为模板列
						type: 'template',
						// 表示当前一列使用模板的名称
						template: 'opt'
					},
				]
			}

		},

		created() {
			this.getCateList()
		},

		methods: {
			async getCateList() {
				const {
					data: res
				} = await this.$http.get('/categories', {
					params: this.queryInfo
				})
				if (res.meta.status !== 200) {
					return this.$message.error('获取商品分类失败')
				}

				this.cateList = res.data
				this.total = res.data.total
				console.log(this.cateList)
			},
			// 监听pagesize改变
			handleSizeChange(newSize) {
				this.queryInfo.pagesize = newSize
				this.getCateList()
			},
			// 监听pagenum改变
			handleCurrentChange(newNum) {
				this.queryInfo.pagenum = newNum
				this.getCateList()
			},
			btnT() {
				this.getPanenList()
				this.adddialogVisible = true
			},
			async getPanenList() {
				const { data : res } = await this.$http.get('/categories1',{params: {type:2}})
				if(res.meta.status !== 200) {
					return this.$message.error('获取父级分类失败')
				}
				console.log(res)
				this.parenList = res.data
				this.$message.success('获取父级分类成功')
			},
			// 选择项变化触发
			handleChange() {
	       console.log(this.valueKeys)
				 if(this.valueKeys.length > 0) {
					 this.addruleForm.cat_pid = this.valueKeys[this.valueKeys.length -1]
					 this.addruleForm.cat_level = this.valueKeys.length
						return 
				 } else {
					 this.addruleForm.cat_pid = 0
					 this.addruleForm.cat_level = 0
				 }
			},
			addCate() {
				console.log(this.addruleForm)
				console.log(this.addruleForm)
				this.$refs.addruleFormRef.validate(async valid => {
					if(!valid) return
					
					const { data : res } = await this.$http.post('/categories2', this.addruleForm)
					if (res.meta.status !== 201) {
						return this.$message.error('获取失败')
					}
					this.$message.success('添加成功')
					this.getCateList()
					this.adddialogVisible = false
				})
			},
			// 简单对话框关闭，
			addCateDia() {
				this.$refs.addruleFormRef.resetFields()
				this.valueKeys = []
				this.addruleForm.cat_level = 0
				this.addruleForm.cat_pid = 0
			}
		},

	}
</script>

<style lang="less" scoped>
	.treetop {
		margin-top: 15px;
	}
	
	.el-cascader {
		width: 100%;
	}
</style>
